// pages/cart/component/cart.js
import {
  ComponentWithStore
} from "mobx-miniprogram-bindings"
import {
  userStore
} from "@/stores/userStore"
import {
  reqCartList,
  reqUpdateChecked,
  reqCheckAllStatus,
  reqAddCart,
  reqDelCartGoods
} from "@/api/cart"
//导入debounce防抖方法
import {
  debounce
} from "miniprogram-licia"
//导入让滑块自动弹回的behavior
import {
  swipeCellBehavior
} from "@/behaviors/swipeCell"
const computedBehavior = require('miniprogram-computed').behavior
ComponentWithStore({
  //注册Behavior
  behaviors: [swipeCellBehavior, computedBehavior],
  // 让页面和Store对象建立关联
  storeBindings: {
    store: userStore,
    fields: [
      "token"
    ]
  },
  computed: {
    //判断是否是全选
    selectAllStatus(data) {
      return data.cartList.length !== 0 && data.cartList.every(item => item.isChecked === 1)
    },
    //计算订单总的价格
    totalPrice(data) {
      let totalPrice = 0
      data.cartList.forEach(item => {
        if (item.isChecked === 1) {
          totalPrice += item.price * item.count
        }
      })
      return totalPrice
    }
  },
  // 组件的初始数据
  data: {
    cartList: [],
    emptyDes: '还没有添加商品，快去添加吧～'
  },

  // 组件的方法列表
  methods: {
    //展示文案信息同时获取列表数据
    async showTipGetList() {
      const {
        token
      } = this.data
      if (!token) {
        this.setData({
          emptyDes: "您尚未登录，点击登录获取更多权益",
          cartList: []
        })
        return
      }
      //如果用户进行了登录，就需要获取购物车数据
      const {
        code,
        data: cartList
      } = await reqCartList()
      if (code === 200) {
        this.setData({
          cartList,
          emptyDes: cartList.length === 0 && "还没有添加商品，快去添加吧~"
        })
      }
    },
    //更新商品购买状态
    async updateChecked(event) {
      const {
        detail
      } = event
      //获取传递的商品id和索引
      const {
        id,
        index
      } = event.target.dataset
      //将最新的购买状态转换成后端接口使用的0-1
      const isChecked = detail ? 1 : 0
      const res = await reqUpdateChecked(id, isChecked)
      if (res.code === 200) {
        this.setData({
          [`cartList[${index}].isChecked`]: isChecked
        })
      }
    },
    //实现全选与全不选
    async selectAllStatus(event) {
      const {
        detail
      } = event
      //需要将选中状态转换
      const isChecked = detail ? 1 : 0
      //调用接口，实现全选与全不选功能
      const res = await reqCheckAllStatus(isChecked)
      if (res.code === 200) {
        // this.showTipGetList()
        //对购物车列表进行深拷贝
        const newCartList = JSON.parse(JSON.stringify(this.data.cartList))
        newCartList.forEach(item => item.isChecked = isChecked)
        //对cartList进行赋值
        this.setData({
          cartList: newCartList
        })
      }
    },
    //更新购买数量
    changeBuyNum: debounce(async function (event) {
      //获取最新的购买数量
      const newBuyNum = event.detail > 200 ? 200 : event.detail
      //获取商品的id，索引，之前的购买数量
      const {
        id,
        index,
        oldbuynum
      } = event.target.dataset
      //使用正则验证用户输入的购买数量
      const reg = /^[1-9]|[1-9]\d|1\d{2}$/
      //对用户输入的购买数量进行验证
      const regRes = reg.test(newBuyNum)
      if (!regRes) {
        this.setData({
          [`cartList[${index}].count`]: oldbuynum
        })
        return
      }
      //验证通过就需要计算差值，然后把差值发送给服务器
      const disCount = newBuyNum - oldbuynum
      //判断购买数量是否发生改变，如果没有发生改变则不发送请求
      if (disCount === 0) return
      const res = await reqAddCart({
        goodsId: id,
        count: disCount
      })
      if (res.code === 200) {
        this.setData({
          [`cartList[${index}].count`]: newBuyNum,
          //如果购买商品数量发生变化，则需要让当前商品变为选中状态
          [`cartList[${index}].isChecked`]: 1
        })
      }

    }, 500),
    //删除购物车中的商品
    async delCartGoods(event) {
      //获取需要删除商品的id
      const {
        id
      } = event.currentTarget.dataset
      //询问用户是否删除该商品
      const modalRes = await wx.modal({
        content: "您确认删除该商品吗？"
      })
      if (modalRes) {
        await reqDelCartGoods(id)
        this.showTipGetList()
      }
    },
    //跳转到订单结算页面
    toOrder() {
      //判断用户是否勾选了商品，如果没有勾选商品则不进行跳转
      if (this.data.totalPrice === 0) {
        wx.toast({
          title: "请选择需要购买的商品"
        })
        return
      }
      wx.navigateTo({
        url: "/modules/orderPayModule/pages/order/detail/detail",
      })
    },
    //如果使用Component方法来构建页面
    //生命周期钩子函数需要写到methods里
    onShow() {
      this.showTipGetList()
    },
    onHide() {
      this.onSwipeCellCommonClick()
    }
  }
})